import { makeStyles } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors/";

const useStyles = makeStyles(() => ({
  root: {
    // backgroundColor: "gray",
    display: "flex",
    flexDirection: "column",
    width: "100%",
    margin: "2rem 3rem",
    color: (theme) => theme.palette.text.primary,
  },

  rows: {
    // background: "green",
    display: "flex",
    flexDirection: "Column",
    marginRight: "auto",
  },

  row: {
    // background: "green",
    display: "flex",
    padding: ".5rem 0",
    fontSize: ".9rem",
    justifyContent: "flex-end",
  },

  title: {
    // background: "green",
    display: "flex",
    alignItems: "center",
    height: "100%",
  },

  inputBox: {
    // background: "green",
    height: "100%",
  },

  input: {
    height: "1.1rem",
    width: "22rem",
    margin: "0 .5em",
    padding: ".3rem",
    borderRadius: ".3em",
    background: (theme) => theme.palette.background.paper,
    borderStyle: "none",
    outlineStyle: "none",
    color: (theme) => theme.palette.text.primary,
    fontSize: "1em",
  },

  saveForm: {
    display: "flex",
  },

  saveFormElement: {
    margin: ".5em",
  },

  saveButton: {
    background: colors.blue[800],
    display: "flex",
    alignItems: "center",
    textAlign: "center",
    padding: ".3em",
    borderRadius: ".2em",
    lineHeight: "100%",
  },

  cancelButton: {
    background: colors.red[800],
    display: "flex",
    alignItems: "center",
    padding: ".3em",
    borderRadius: ".2em",
    lineHeight: "100%",
  },
}));

export { useStyles };
